<script setup lang="ts" name="Count">
  import {ref} from "vue";
  import {useCount} from "@/store/count";
  import {storeToRefs} from "pinia";

  const countStore = useCount()
  let {sum,name,address,bigSum,upperSchool} = storeToRefs(countStore)
  let  n = ref(1)
  function addSUm (){
      countStore.interment(n.value)
  }
  function minusSum (){

    sum.value -=  n.value
  }
</script>

<template>
 <div class="count">
   <h2>当前求和为：{{sum}},放大十倍后{{bigSum}}</h2>
   <h2>姓名：{{name}},地址：{{address}}，地址大写{{upperSchool}}</h2>
   <select name="" id="" v-model.number="n">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
   </select>
   <button @click="addSUm">加</button>
   <button @click="minusSum">减</button>
 </div>
</template>

<style scoped>
  .count{
    background: skyblue;
    padding: 20px;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    select,button{
      height: 25px;
      margin: 0 5px;
    }
  }
</style>